import type { Metadata } from "next";
import Link from "next/link";
import { EventRow } from "@/components/market/event-row";
import { InstrumentTable } from "@/components/market/instrument-table";
import { Empty, Kv, Page, PageHeader, Section, Stat } from "@/components/ui/section";
import { StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import { formatDateTime } from "@/lib/format";
import type { Breadth, Exchange, ExchangeStatus, InstrumentWithQuote, MarketEvent } from "@/lib/types";

interface Detail {
  exchange: Exchange;
  status: ExchangeStatus;
  holidays: Array<{ date: string; name: string; kind: string; closeTime: string | null }>;
  instruments_tracked: number;
  instruments_quoted: number;
  breadth: Breadth;
  gainers: InstrumentWithQuote[];
  losers: InstrumentWithQuote[];
  most_active: InstrumentWithQuote[];
  events: MarketEvent[];
}

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  try {
    const d = await api<Detail>(`/v1/exchanges/${encodeURIComponent(id)}`);
    return { title: `${d.exchange.name} — status, hours, movers`, description: `${d.exchange.name} (${d.exchange.mic ?? d.exchange.id}): session state, local time, holidays, breadth and the largest moves among instruments Market Atlas tracks.`, alternates: { canonical: `/exchanges/${d.exchange.id}` } };
  } catch {
    return { title: "Exchange" };
  }
}

export default async function ExchangePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const d = await api<Detail>(`/v1/exchanges/${encodeURIComponent(id)}`);
  const e = d.exchange;
  const sessions = e.sessions;
  const sessionText = sessions.continuous ? "Continuous (24/7)" : sessions.regular.map((s) => `${s.open}–${s.close}`).join(", ");
  return (
    <Page wide>
      <PageHeader
        kicker={
          <span className="flex items-center gap-2">
            <Link href="/exchanges" className="hover:text-ink">
              Exchanges
            </Link>
            <span>·</span>
            <Link href={`/countries/${e.country}`} className="hover:text-ink">
              {e.country}
            </Link>
          </span>
        }
        title={e.name}
        lead={`${e.operator ? `${e.operator} · ` : ""}${e.city ?? ""} · ${e.timezone}${e.website ? "" : ""}`}
        actions={
          <div className="flex items-center gap-2 text-sm">
            <StatusBadge status={d.status.state} />
            <span className="mono text-ink-2">local {d.status.localTime}</span>
            {e.website && (
              <a href={e.website} target="_blank" rel="noopener noreferrer" className="text-xs text-accent hover:underline">
                website ↗
              </a>
            )}
          </div>
        }
      />
      <div className="grid grid-cols-2 gap-4 rounded-md border border-rule bg-surface px-4 py-4 sm:grid-cols-4">
        <Stat label="Session" value={d.status.state.toLowerCase()} sub={d.status.isHoliday ? d.status.holidayName ?? "holiday" : sessionText} />
        <Stat label="Next transition" value={d.status.nextTransition ? d.status.nextTransition.state.toLowerCase() : "—"} sub={d.status.nextTransition ? formatDateTime(d.status.nextTransition.at, { tz: e.timezone }) : sessions.continuous ? "never closes" : ""} />
        <Stat label="Instruments tracked" value={d.instruments_tracked.toLocaleString("en-US")} sub={`${d.instruments_quoted} with a canonical quote`} />
        <Stat label="Breadth" value={d.breadth.instruments ? `${d.breadth.advancers} ▲ ${d.breadth.decliners} ▼` : "—"} sub={d.breadth.instruments ? `median ${d.breadth.median_change_percent?.toFixed(2)}%` : "no quoted names"} tone={d.breadth.advancers > d.breadth.decliners ? "pos" : d.breadth.decliners > d.breadth.advancers ? "neg" : undefined} />
      </div>
      <div className="mt-6 grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-[1fr_320px]">
        <div>
          <Section title="Largest gains" hint="instruments tracked on this venue">
            <InstrumentTable rows={d.gainers} compact showExchange={false} emptyText="No quoted instruments on this venue yet." />
          </Section>
          <Section title="Largest losses">
            <InstrumentTable rows={d.losers} compact showExchange={false} defaultSort="change" emptyText="No quoted instruments on this venue yet." />
          </Section>
          <Section title="Most active">
            <InstrumentTable rows={d.most_active} compact showExchange={false} defaultSort="volume" emptyText="No volume observed yet." />
          </Section>
          <Section title="Events" hint="market open/close, halts, moves">
            {d.events.length ? (
              <ul className="rounded-md border border-rule bg-surface px-3">
                {d.events.map((ev) => (
                  <EventRow key={ev.id} e={ev} />
                ))}
              </ul>
            ) : (
              <Empty>No events recorded for this venue yet.</Empty>
            )}
          </Section>
        </div>
        <aside className="space-y-6">
          <div className="rounded-md border border-rule bg-surface p-4">
            <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Venue</h3>
            <Kv cols={1} className="mt-2" items={[["MIC", e.mic ?? "—"], ["Operator", e.operator ?? "—"], ["Country", e.country], ["Time zone", e.timezone], ["Currency", e.currency ?? "—"], ["Asset classes", (e.asset_classes ?? []).join(", ").toLowerCase() || "—"]]} />
          </div>
          <div className="rounded-md border border-rule bg-surface p-4">
            <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Trading sessions (local)</h3>
            <Kv
              cols={1}
              className="mt-2"
              items={[
                ...(sessions.pre ? ([["Pre-market", `${sessions.pre.open}–${sessions.pre.close}`]] as Array<[string, string]>) : []),
                ...sessions.regular.map((s, i) => [`Regular${sessions.regular.length > 1 ? ` ${i + 1}` : ""}`, `${s.open}–${s.close}`] as [string, string]),
                ...(sessions.post ? ([["After hours", `${sessions.post.open}–${sessions.post.close}`]] as Array<[string, string]>) : []),
                ...(sessions.continuous ? ([["Schedule", "24 hours, every day"]] as Array<[string, string]>) : []),
                ...(sessions.weekdays ? ([["Trading days", sessions.weekdays.map((d) => ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d]).join(" ")]] as Array<[string, string]>) : []),
              ]}
            />
          </div>
          <div className="rounded-md border border-rule bg-surface p-4">
            <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Upcoming holidays & early closes</h3>
            {d.holidays.length ? (
              <ul className="mt-2 divide-y divide-rule text-sm">
                {d.holidays.map((h) => (
                  <li key={h.date} className="flex items-baseline justify-between gap-2 py-1.5">
                    <span className="min-w-0 truncate">{h.name}</span>
                    <span className="mono shrink-0 text-xs text-ink-3">
                      {h.date}
                      {h.kind === "EARLY_CLOSE" && h.closeTime ? ` · closes ${h.closeTime}` : ""}
                    </span>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="mt-2 text-xs text-ink-3">No holiday calendar loaded for this venue — weekdays are assumed to trade.</p>
            )}
          </div>
        </aside>
      </div>
    </Page>
  );
}